iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
自我挑戰組

使用Vue製作簡單的 WorkBoard (30天)系列 第 9

(第九天)自我學習 - 標籤上指定一個 Class 做綁定

  • 分享至 

  • xImage
  •  

單一 Class 綁定

上次學的是把所有的 class 做綁定,不知道大家有沒有這樣的一個問題,如果想要綁定一個的話怎麼辦呢?

//一開始在 data 裡面加上一個 class 的名稱
data:{
    myClass: {
        // 需要在 css 裡面定義並且修改樣式
        isActive:false,
        isRed:true,
    }
}

一樣會使用的是 v-bind:class 來做,那他也可以寫成 :class 這樣子 ':' => 'v-bind'

id = "myApp" 裡面加上標籤

//myClass 這個可以不用寫在 css 裡面
<h1 :class="myClass">綁定單獨的 class 測試</h1>

這樣的話就可以控制單獨的 class 了,直接到 myClass 裡面修改。
試試看吧!


上一篇
(第八天)自我學習 - 綁定標籤上的 Class
下一篇
(第十天)自我學習 - v-if v-else-if v-else
系列文
使用Vue製作簡單的 WorkBoard (30天)24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言